<template>
  <div class="cron-helper">
    <el-tabs v-model="activeTab">
      <el-tab-pane label="快速选择" name="quick">
        <div class="quick-options">
          <el-row :gutter="16">
            <el-col :span="12" v-for="option in quickOptions" :key="option.cron">
              <el-card
                  class="option-card"
                  @click="selectCron(option.cron)"
                  :body-style="{ padding: '20px' }"
                  shadow="hover">
                <div class="option-content">
                  <div class="option-title">{{ option.name }}</div>
                  <div class="option-cron">{{ option.cron }}</div>
                  <div class="option-desc">{{ option.description }}</div>
                </div>
              </el-card>
            </el-col>
          </el-row>
        </div>
      </el-tab-pane>

      <el-tab-pane label="自定义" name="custom">
        <div class="custom-builder">
          <el-form :model="customCron" label-width="80px">
            <el-form-item label="秒">
              <el-select
                  v-model="customCron.second"
                  @change="buildCron"
                  filterable
                  allow-create
                  placeholder="输入或选择秒数">
                <el-option label="每秒 (*)" value="*"></el-option>
                <el-option label="0秒" value="0"></el-option>
                <el-option label="15秒" value="15"></el-option>
                <el-option label="30秒" value="30"></el-option>
                <el-option label="45秒" value="45"></el-option>
              </el-select>
              <div class="field-tip">可输入: *, 0-59, 0/5, 10,20,30</div>
            </el-form-item>

            <el-form-item label="分钟">
              <el-select
                  v-model="customCron.minute"
                  @change="buildCron"
                  filterable
                  allow-create
                  placeholder="输入或选择分钟数">
                <el-option label="每分钟 (*)" value="*"></el-option>
                <el-option label="0分" value="0"></el-option>
                <el-option label="15分" value="15"></el-option>
                <el-option label="30分" value="30"></el-option>
                <el-option label="45分" value="45"></el-option>
                <el-option label="每5分钟" value="0/5"></el-option>
                <el-option label="每10分钟" value="0/10"></el-option>
                <el-option label="每15分钟" value="0/15"></el-option>
                <el-option label="每30分钟" value="0/30"></el-option>
              </el-select>
              <div class="field-tip">可输入: *, 0-59, 0/10, 15,30,45</div>
            </el-form-item>

            <el-form-item label="小时">
              <el-select
                  v-model="customCron.hour"
                  @change="buildCron"
                  filterable
                  allow-create
                  placeholder="输入或选择小时">
                <el-option label="每小时 (*)" value="*"></el-option>
                <el-option label="每2小时" value="0/2"></el-option>
                <el-option label="每6小时" value="0/6"></el-option>
                <el-option label="每12小时" value="0/12"></el-option>
                <el-option v-for="h in 24" :key="h-1" :label="`${h-1}点`" :value="(h-1).toString()"></el-option>
              </el-select>
              <div class="field-tip">可输入: *, 0-23, 0/6, 8,12,18</div>
            </el-form-item>

            <el-form-item label="日">
              <el-select
                  v-model="customCron.day"
                  @change="buildCron"
                  filterable
                  allow-create
                  placeholder="输入或选择日期">
                <el-option label="每天 (*)" value="*"></el-option>
                <el-option label="不指定 (?)" value="?"></el-option>
                <el-option label="每3天" value="1/3"></el-option>
                <el-option label="每5天" value="1/5"></el-option>
                <el-option label="每10天" value="1/10"></el-option>
                <el-option label="月初(1-5号)" value="1-5"></el-option>
                <el-option label="月末(25-31号)" value="25-31"></el-option>
                <el-option v-for="d in 31" :key="d" :label="`${d}日`" :value="d.toString()"></el-option>
              </el-select>
              <div class="field-tip">可输入: *, ?, 1-31, 1/5, 1,15,30</div>
            </el-form-item>

            <el-form-item label="月">
              <el-select
                  v-model="customCron.month"
                  @change="buildCron"
                  filterable
                  allow-create
                  placeholder="输入或选择月份">
                <el-option label="每月 (*)" value="*"></el-option>
                <el-option label="每3个月" value="1/3"></el-option>
                <el-option label="每6个月" value="1/6"></el-option>
                <el-option label="上半年(1-6月)" value="1-6"></el-option>
                <el-option label="下半年(7-12月)" value="7-12"></el-option>
                <el-option v-for="m in 12" :key="m" :label="`${m}月`" :value="m.toString()"></el-option>
              </el-select>
              <div class="field-tip">可输入: *, 1-12, 1/3, 1,4,7,10</div>
            </el-form-item>

            <el-form-item label="星期">
              <el-select
                  v-model="customCron.week"
                  @change="buildCron"
                  filterable
                  allow-create
                  placeholder="输入或选择星期">
                <el-option label="每天 (?)" value="?"></el-option>
                <el-option label="不指定 (*)" value="*"></el-option>
                <el-option label="工作日 (1-5)" value="1-5"></el-option>
                <el-option label="周末 (6,0)" value="6,0"></el-option>
                <el-option label="周一" value="1"></el-option>
                <el-option label="周二" value="2"></el-option>
                <el-option label="周三" value="3"></el-option>
                <el-option label="周四" value="4"></el-option>
                <el-option label="周五" value="5"></el-option>
                <el-option label="周六" value="6"></el-option>
                <el-option label="周日" value="0"></el-option>
              </el-select>
              <div class="field-tip">可输入: ?, *, 0-6, 1-5, 1,3,5</div>
            </el-form-item>
          </el-form>

          <el-divider></el-divider>

          <div class="result-section">
            <div class="result-title">生成的Cron表达式：</div>
            <div class="result-cron">{{ builtCron }}</div>
            <div class="result-desc">{{ getCronDescription(builtCron) }}</div>
            <el-button type="primary" @click="selectCron(builtCron)" :icon="Check">使用此表达式</el-button>
          </div>
        </div>
      </el-tab-pane>

      <el-tab-pane label="常用示例" name="examples">
        <div class="examples-content">
          <h3>常用Cron表达式示例</h3>
          <div class="example-grid">
            <div v-for="example in cronExamples" :key="example.cron" class="example-item">
              <div class="example-header">
                <span class="example-title">{{ example.name }}</span>
                <el-button size="small" type="primary" @click="selectCron(example.cron)">使用</el-button>
              </div>
              <div class="example-cron">{{ example.cron }}</div>
              <div class="example-desc">{{ example.description }}</div>
            </div>
          </div>
        </div>
      </el-tab-pane>

      <el-tab-pane label="说明" name="help">
        <div class="help-content">
          <h3>Cron表达式格式</h3>
          <p>Cron表达式由6个字段组成，用空格分隔：</p>
          <div class="format-table">
            <div class="format-row">
              <span class="field">秒</span>
              <span class="field">分</span>
              <span class="field">时</span>
              <span class="field">日</span>
              <span class="field">月</span>
              <span class="field">星期</span>
            </div>
          </div>

          <h3>特殊字符说明</h3>
          <ul class="special-chars">
            <li><code>*</code> - 匹配所有值（任意）</li>
            <li><code>?</code> - 仅用于日和星期字段，表示不指定值</li>
            <li><code>/</code> - 指定增量，如 0/15 表示从0开始，每15分钟</li>
            <li><code>-</code> - 指定范围，如 1-5 表示1到5</li>
            <li><code>,</code> - 指定多个值，如 1,3,5</li>
            <li><code>L</code> - 表示最后，如 5L 表示最后一个星期五</li>
            <li><code>W</code> - 表示工作日，如 15W 表示最接近15号的工作日</li>
            <li><code>#</code> - 表示第几个，如 6#3 表示第三个星期六</li>
          </ul>

          <h3>字段取值范围</h3>
          <ul class="value-ranges">
            <li><strong>秒：</strong>0-59</li>
            <li><strong>分：</strong>0-59</li>
            <li><strong>时：</strong>0-23</li>
            <li><strong>日：</strong>1-31</li>
            <li><strong>月：</strong>1-12</li>
            <li><strong>星期：</strong>0-6 (0和7都表示星期日)</li>
          </ul>

          <h3>注意事项</h3>
          <ul class="notes">
            <li>日和星期字段不能同时指定，其中一个必须使用 <code>?</code></li>
            <li>使用 <code>L</code> 和 <code>W</code> 时要注意月份天数</li>
            <li>表达式不区分大小写</li>
            <li>建议先在测试环境验证表达式的正确性</li>
          </ul>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { Check } from '@element-plus/icons-vue'
import { parseCronExpression } from '@/utils/helpers'

// Emits
const emit = defineEmits(['select'])

// 响应式数据
const activeTab = ref('quick')

const quickOptions = [
  {
    name: '每天8点',
    cron: '0 0 8 * * ?',
    description: '每天早上8点执行一次'
  },
  {
    name: '每12小时',
    cron: '0 0 */12 * * ?',
    description: '每12小时执行一次'
  },
  {
    name: '每6小时',
    cron: '0 0 */6 * * ?',
    description: '每6小时执行一次'
  },
  {
    name: '每小时',
    cron: '0 0 * * * ?',
    description: '每小时整点执行'
  },
  {
    name: '每30分钟',
    cron: '0 */30 * * * ?',
    description: '每30分钟执行一次'
  },
  {
    name: '工作日9点',
    cron: '0 0 9 * * 1-5',
    description: '周一到周五早上9点'
  },
  {
    name: '周末10点',
    cron: '0 0 10 * * 6,0',
    description: '周六和周日早上10点'
  },
  {
    name: '每月1日',
    cron: '0 0 9 1 * ?',
    description: '每月1日早上9点'
  }
]

const cronExamples = [
  {
    name: '每分钟执行',
    cron: '0 * * * * ?',
    description: '每分钟的0秒执行'
  },
  {
    name: '每5分钟执行',
    cron: '0 0/5 * * * ?',
    description: '每5分钟执行一次'
  },
  {
    name: '每小时的30分执行',
    cron: '0 30 * * * ?',
    description: '每小时的30分钟执行'
  },
  {
    name: '每天凌晨2点',
    cron: '0 0 2 * * ?',
    description: '每天凌晨2点执行'
  },
  {
    name: '每周一上午10点',
    cron: '0 0 10 ? * 1',
    description: '每周一上午10点执行'
  },
  {
    name: '每月15日中午12点',
    cron: '0 0 12 15 * ?',
    description: '每月15日中午12点执行'
  },
  {
    name: '每季度第一天',
    cron: '0 0 0 1 1/3 ?',
    description: '每季度第一天执行'
  },
  {
    name: '工作日每2小时',
    cron: '0 0 0/2 ? * 1-5',
    description: '工作日每2小时执行'
  },
  {
    name: '每天上午8-11点',
    cron: '0 0 8-11 * * ?',
    description: '每天上午8点到11点，每小时执行'
  },
  {
    name: '每月最后一天',
    cron: '0 0 0 L * ?',
    description: '每月最后一天执行'
  }
]

const customCron = reactive({
  second: '0',
  minute: '0',
  hour: '8',
  day: '*',
  month: '*',
  week: '?'
})

const builtCron = ref('0 0 8 * * ?')

// 计算属性
const getCronDescription = (cron) => {
  return parseCronExpression(cron)
}

// 方法
const selectCron = (cron) => {
  emit('select', cron)
}

const buildCron = () => {
  builtCron.value = `${customCron.second} ${customCron.minute} ${customCron.hour} ${customCron.day} ${customCron.month} ${customCron.week}`
}
</script>

<style scoped>
.option-card {
  margin-bottom: 16px;
  cursor: pointer;
  transition: all 0.3s;
}

.option-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.option-content {
  text-align: center;
}

.option-title {
  font-weight: bold;
  font-size: 16px;
  margin-bottom: 8px;
}

.option-cron {
  font-family: monospace;
  color: #409eff;
  margin-bottom: 8px;
  font-size: 14px;
}

.option-desc {
  color: #909399;
  font-size: 12px;
}

.field-tip {
  font-size: 11px;
  color: #909399;
  margin-top: 4px;
  line-height: 1.4;
}

.result-section {
  padding: 20px;
  background: #f8f9fa;
  border-radius: 6px;
  text-align: center;
}

.result-title {
  font-weight: bold;
  margin-bottom: 10px;
}

.result-cron {
  font-family: monospace;
  font-size: 18px;
  color: #409eff;
  margin-bottom: 10px;
  padding: 10px;
  background: white;
  border-radius: 4px;
}

.result-desc {
  color: #606266;
  margin-bottom: 20px;
}

.examples-content {
  padding: 0 20px;
}

.example-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px;
  margin-top: 20px;
}

.example-item {
  border: 1px solid #e4e7ed;
  border-radius: 6px;
  padding: 16px;
  background: #fafafa;
}

.example-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.example-title {
  font-weight: bold;
  color: #303133;
}

.example-cron {
  font-family: monospace;
  color: #409eff;
  font-size: 14px;
  margin-bottom: 8px;
  padding: 6px;
  background: white;
  border-radius: 4px;
}

.example-desc {
  color: #606266;
  font-size: 12px;
}

.format-table {
  margin: 10px 0;
  text-align: center;
}

.format-row {
  display: flex;
  justify-content: space-around;
  padding: 10px;
  background: #f0f2f5;
  border-radius: 4px;
}

.field {
  font-weight: bold;
  color: #409eff;
}

.special-chars,
.value-ranges,
.notes {
  text-align: left;
  padding-left: 20px;
}

.special-chars li,
.value-ranges li,
.notes li {
  margin: 8px 0;
  line-height: 1.6;
}

code {
  background: #f1f2f3;
  padding: 2px 6px;
  border-radius: 3px;
  font-family: monospace;
  font-size: 13px;
}

h3 {
  color: #303133;
  margin: 20px 0 10px 0;
}

.help-content {
  padding: 0 20px;
}
</style>